 <template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="moneyTotal" ref="moneyTotal">
            <div class="item">
              <div class="money"><span :class="classObject(topData.actualPayAmount)">{{topData.actualPayAmount}}</span>元</div>
              <div class="text">实付款总金额</div>
            </div>
            <div class="item">
              <div class="money">¥<span :class="classObject(topData.tradeCommissionAmount)">{{topData.tradeCommissionAmount}}</span>元</div>
              <div class="text">交易提成总金额</div>
            </div>
            <div class="item">
              <div class="money">￥<span :class="classObject(topData.routingServiceFeeAmount)">{{topData.routingServiceFeeAmount}}</span>元</div>
              <div class="text">分账服务费总金额</div>
            </div>
            <div class="item">
              <div class="money">￥<span :class="classObject(topData.platformAmount)">{{topData.platformAmount}}</span>元</div>
              <div class="text">平台实收总金额</div>
            </div>
            <div class="item">
              <div class="money" >￥<span :class="classObject(topData.receiptsAmount)">{{topData.receiptsAmount}}</span>元</div>
              <div class="text">商家实收总金额</div>
            </div>
        </div>
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent  class="demo-form-inline" id="searchBox">
            <el-form-item prop="buyTelephone">
                <el-input v-model="searchForm.buyTelephone" clearable placeholder="购买人手机号"></el-input>
            </el-form-item>
            <el-form-item prop="shareTelephone">
                <el-input v-model="searchForm.shareTelephone" clearable placeholder="分享人手机号"></el-input>
            </el-form-item>
            <el-form-item prop="orderNo">
                <el-input v-model="searchForm.orderNo" clearable placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item prop="storeName">
                <el-input v-model="searchForm.storeName" clearable placeholder="商家门店名称"></el-input>
            </el-form-item>
            <el-form-item prop="applicationSource">
                <el-select
                  v-model="searchForm.applicationSource"
                  placeholder="应用端来源"
                  clearable
                  size="small"
                >
                  <el-option label="微信小程序" value="1"></el-option>
                  <el-option label="安卓" value="2"></el-option>
                  <el-option label="苹果" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="orderType">
                <el-select
                  v-model="searchForm.orderType"
                  placeholder="订单类型"
                  clearable
                  size="small"
                >
                  <el-option label="云仓" value="4"></el-option>
                  <el-option label="好礼" value="1"></el-option>
                  <el-option label="扫码" value="3"></el-option>
                  <el-option label="好店" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="placeOrderTime">
              <el-date-picker v-model="placeOrderTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="下单开始日期" end-placeholder="下单结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="closeTime">
              <el-date-picker v-model="closeTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="结算开始日期" end-placeholder="结算结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
         <div class="actionBtnLeft">
           <el-radio-group v-model="searchForm.levelId" size="small" @change="handleSearch" style="margin-right: 10px;">
             <el-radio-button label="">全部</el-radio-button>
             <el-radio-button :label="item.levelId" v-for="item in levelList">{{item.name}}</el-radio-button>
           </el-radio-group>
           <el-radio-group v-model="searchForm.settlementStatus" size="small" @change="handleSearch">
             <el-radio-button label="0">全部</el-radio-button>
             <el-radio-button label="1" >待结算</el-radio-button>
             <el-radio-button label="2" >已结算</el-radio-button>
           </el-radio-group>
           <el-button
             style="margin-left:10px;"
             type="warning"
             icon="el-icon-download"
             size="small"
             :loading="btnLoading"
             @click="handleExport"
             v-has="'statistics:orderDetail:export'"
           >导出</el-button>
         </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" row-key="id" v-loading="loading" border :height="tableHeight"  stripe>
            <el-table-column prop="orderNo" label="订单号" v-if="!hideTableColumn.includes('orderNo')"></el-table-column>
            <el-table-column prop="orderTypeName" label="订单类型" v-if="!hideTableColumn.includes('orderType')" align="center"></el-table-column>
            <el-table-column prop="name" label="购买人手机号" v-if="!hideTableColumn.includes('buyTelephone')" align="center">
              <template slot-scope="scope">
                  <span>{{starPhone(scope.row.buyTelephone)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="buyName" label="购买人姓名" v-if="!hideTableColumn.includes('buyName')" align="center">
              <template slot-scope="scope">
                  <span>{{scope.row.buyName?scope.row.buyName:'--'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="levelName" label="用户等级" v-if="!hideTableColumn.includes('levelName')" align="center"></el-table-column>
            <el-table-column prop="name" label="分享人手机号" v-if="!hideTableColumn.includes('shareTelephone')" align="center">
              <template slot-scope="scope">
                  <span>{{starPhone(scope.row.shareTelephone)}}</span>
                </template>
            </el-table-column>

            <el-table-column prop="name" label="应用端来源" v-if="!hideTableColumn.includes('applicationSource')" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.applicationSource=='1'">微信小程序</span>
                  <span v-else-if="scope.row.applicationSource=='2'">安卓</span>
                  <span v-else-if="scope.row.applicationSource=='3'">苹果</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="下单日期" v-if="!hideTableColumn.includes('orderTime')" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.orderTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="storeName" label="商家门店名称" v-if="!hideTableColumn.includes('storeName')" align="center"></el-table-column>
            <el-table-column prop="goodsNum" label="商品总数量(件)" v-if="!hideTableColumn.includes('goodsNum')" align="center"></el-table-column>
            <el-table-column prop="totalPrices" label="商品合计金额(元)" v-if="!hideTableColumn.includes('totalPrices')" align="center"></el-table-column>
            <el-table-column prop="actualPayPrice" label="实付款金额(元)" v-if="!hideTableColumn.includes('actualPayPrice')" align="center"></el-table-column>
            <el-table-column prop="cashBackAmount" label="首单奖励(元)" v-if="!hideTableColumn.includes('cashBackAmount')" align="center"></el-table-column>
            <el-table-column prop="buySuperiorAmortization" label="购买人上级交易提成(元)" v-if="!hideTableColumn.includes('buySuperiorAmortization')" align="center"></el-table-column>
            <el-table-column prop="storeSuperiorAmortization" label="商家上级交易提成(元)" v-if="!hideTableColumn.includes('storeSuperiorAmortization')" align="center"></el-table-column>
            <el-table-column prop="routingServiceFee" label="分账服务费(元)" v-if="!hideTableColumn.includes('routingServiceFee')" align="center"></el-table-column>
            <el-table-column prop="platformAmount" label="平台实收金额(元)" v-if="!hideTableColumn.includes('platformAmount')" align="center"></el-table-column>
            <el-table-column prop="storeAmount" label="商家实收金额(元)" v-if="!hideTableColumn.includes('storeAmount')" align="center"></el-table-column>

          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="dataInfo"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    settlementList,settlementExport,getSettlementQuantity,getAllMemberLevel
  } from '@/api/getData'
  import option from '../../common/option.js';

  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        placeOrderTime:[],
        closeTime:[],
        searchForm: {
          buyTelephone:'',
          shareTelephone:'',
          orderNo:'',
          storeName:'',
          applicationSource:"",
          orderType:'',
          levelId:'',

          settlementStatus:'0',
          pageNum:1,
          pageSize:20,
        },
        total: 0,
        tableColumn:[{/*自定义表格列*/
            name:'订单号',
            value:'orderNo'
        },{
            name:'订单类型',
            value:'orderType'
        },{
            name:'购买人手机号',
            value:'buyTelephone'
        },{
            name:'分享人手机号',
            value:'shareTelephone'
        },{
            name:'应用端来源',
            value:'applicationSource'
        },{
            name:'下单日期',
            value:'orderTime'
        },{
            name:'商家门店名称',
            value:'storeName'
        },{
            name:'商品总数量(件)',
            value:'goodsNum'
        },{
            name:'商品合计金额(元)',
            value:'totalPrices'
        },{
            name:'实付款金额(元)',
            value:'actualPayPrice'
        },{
            name:'购买人上级交易提成(元)"',
            value:'buySuperiorAmortization'
        },{
            name:'商家上级交易提成(元)',
            value:'storeSuperiorAmortization'
        },{
            name:'分账服务费(元)',
            value:'routingServiceFee'
        },{
            name:'平台实收金额(元)',
            value:'platformAmount'
        },{
            name:'商家实收金额(元)',
            value:'storeAmount'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        dataList:[],
        topData:{},//头部数据
        levelList:[]
      }
    },
    created() {
      getAllMemberLevel().then(res=>{
        this.levelList = res.data;
      })
    },
    mounted() {
       this.topDataInfo();
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.moneyTotal.offsetHeight - this.$refs.search.offsetHeight  - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    computed:{
      classObject(){
        return (str)=>{
          if(str){
            let data =  ((str+'').includes('-')?'red':'')
            return data
          }
        }
      },
      starPhone(){
        return (phoneNum)=>{
          if(phoneNum){
            let str =  String(phoneNum),
            strLen = str.slice(-7,-3);
            return str.replace(strLen,"****");
          }
        }
      },
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    methods: {
      resetSearch(){
        this. placeOrderTime = [];
        this.closeTime = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      topDataInfo(){
        let data = this.addDateRange(this.searchForm, this.placeOrderTime, 'startTime', 'endTime');
        data = this.addDateRange(this.searchForm, this.closeTime, 'startSettlementTime', 'endSettlementTime');
        getSettlementQuantity(data).then((res)=>{
          this.topData = res.data;
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        let data = this.addDateRange(this.searchForm, this.placeOrderTime, 'startTime', 'endTime');
        data = this.addDateRange(this.searchForm, this.closeTime, 'startSettlementTime', 'endSettlementTime');
        this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
          this.btnLoading = true;
          return settlementExport(data);
        }).then(response => {
          this.$download.name(response.msg);
          this.btnLoading = false;
        }).catch(() => {});
     },
     handleSearch(){
         this.searchForm.pageNum = 1;
         this.dataInfo();
         this.topDataInfo();
     },
     async dataInfo() {
       try {
         let data = this.addDateRange(this.searchForm, this.placeOrderTime, 'startTime', 'endTime');
         data = this.addDateRange(this.searchForm, this.closeTime, 'startSettlementTime', 'endSettlementTime');
         this.loading = true;
         const result = await settlementList(data);
         if (result.code == 200) {
           this.total = result.total;
           this.dataList = result.rows;
         } else {
           this.$message.error(result.msg);
         }
         this.loading = false;
       } catch (err) {
         this.loading = false;
         console.log(err)
       }
     },
    }
  }
</script>

<style scoped lang="scss">
  .red{
    color:red;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
</style>
